<template>
	<view class="box">
		<!-- 成绩圆形图 -->
		<view class="coupon-canvas">
			<view class="progress_box">
				<canvas id="myCanvasBg" canvas-id="myCanvasBg" class="myCanvas"></canvas>
				<canvas id="myCanvas" canvas-id="myCanvas" class="myCanvas"></canvas>
				<view class="receive">
					<view class="percent">{{type}}</view>
					<view class="percent-receive">{{score.split("/")[0]}}</view>
					<view class="percent">/{{score.split("/")[1]}}</view>
				</view>
			</view>
		</view>
		<!-- 选项卡 -->
		<view class="kabox">答题卡</view>
		<scroll-view class="contentbox" scroll-y>
			<text v-for="(item, index) in grades" @click="navTo(true, index)" :class="{numberBtn: true, trueBtn: item == 1}">{{index+1}}</text>
		</scroll-view>
		<view class="btnbox">
			<button @click="navTo(true, 0)">全部解析</button>
			<button type="primary" @click="navTo(false, 0)" v-if="error != 0">错题解析</button>
		</view>
	</view>
</template>

<script>
	import { getgrade } from '../../apis/questionAPI.js'
	export default {
		data() {
			return {
				grades: [],
				score: '',
				error: 0,
				percent: '',
				type: '',
			}
		},
		onLoad(option) {
			let that = this
			this.type = option.type
			getgrade({
				time: option.time,
				type: option.type
			}).then(res => {
				// console.log(res)
				that.grades = res.grades
				// 将全部问题、答案和错题更新到vuex中，以便分析
				that.$store.dispatch('setquestions', res.questions)
				that.$store.dispatch('setanswers', res.answers)
				that.$store.dispatch('seterrorindexs', res.errorIndexs)
				that.error = res.errorIndexs.length
				let str = res.score+'/'+res.total
				that.score = str
				that.childrenTagName(str.split('/'))
			})
		},
		methods: {
			navTo(isAll, index) {
				uni.navigateTo({
					url: `/pages/analysis/analysis?isAll=${isAll}&n=${index}`
				})
			},
			childrenTagName(arr) {
				this.$nextTick(() => {
						let score = Math.round((arr[0]-0) * 100 / (arr[1]-0));
						// console.log(score)
						this.percent = score
						this.drawMain(score, "#D2A36C", "#fff","#fff");
				})
			},
			drawMain(percent, forecolor, bgcolor, fillColor) {
				/*
					@drawing_elem: 绘制对象
					@percent：绘制圆环百分比, 范围[0, 100]
					@forecolor: 绘制圆环的前景色，颜色代码
					@bgcolor: 绘制圆环的背景色，颜色代码
				*/
				var context = uni.createCanvasContext('myCanvasBg', this);
				var center_x = 130 / 2 ;
				var center_y =  130 / 2 ;
				var rad = Math.PI / 3 * 5 / 100; //绘制的为300度的圆
			
				// 绘制背景圆圈
				function backgroundCircle() {
					context.save();
					context.beginPath();
					context.setLineWidth(4); //设置线宽
					var radius = center_x -4;
					context.setLineCap('round');
					context.setStrokeStyle(bgcolor);
					context.arc(center_x, center_y, radius, -Math.PI / 180 * 240, Math.PI / 180 * 60, false);
					context.stroke();
					context.draw()
			
				}
			
				//绘制运动圆环
				function foregroundCircle(n) {
					var context = uni.createCanvasContext('myCanvas', this);
					context.beginPath();
					context.setLineWidth(8); //设置线宽
					var radius = center_x -4;
					context.setLineCap('round');
					context.setStrokeStyle(forecolor);
					context.arc(center_x, center_y, radius, -Math.PI / 180 * 240, -Math.PI / 180 * 240 + n * rad,
						false); //用于绘制圆弧context.arc(x坐标，y坐标，半径，起始角度，终止角度，顺时针/逆时针)
					context.stroke();
					context.draw();
					
				}
			
				//执行动画
				(function drawFrame() {
					backgroundCircle();
					foregroundCircle(percent);
				}());
			
			},

		}
	}
</script>

<style lang="less" scoped>
	.coupon-canvas {
		width: 260rpx;
		height: 260rpx;
		margin: 2vh auto;
		padding: 2vh;
		border-radius: 50%;
		background-color: #f8f8f8;
		.progress_box {
			width: 260rpx;
			height: 260rpx;	
			display: -ms-flexbox;
			display: flex;
			display: -webkit-flex;
			-ms-flex-pack: center;
			justify-content: center;
			-ms-flex-align: center;
			position: relative;
			.myCanvas{
				width: 260rpx;
				height: 260rpx;	
				/* #ifndef MP-WEIXIN */
				position: static !important;
				/* #endif */
				/* #ifdef MP-WEIXIN */
				position: absolute;
				/* #endif */
			}
			.receive{
				position: absolute;
				top: 50%;
				text-align: center;
				left: 50%;
				transform: translate(-50%, -50%);
				
				.percent-receive{
					color: #D2A36C;
					font-size: 7vh;
				}
				.percent{
					color: #8f8f8f;
					font-size: 1vh;
				}
			}
		}
	}
	.kabox {
		margin: 0 auto;
		background-color: #f8f8f8;
		width: 87vw;
		color: #8f8f8f;
		font-size: 2.3vh;
		margin-bottom: 1vh;
		padding: 2vw 3vw;
	}
	.contentbox {
		margin: 0 auto;
		max-width: 87vw;
		max-height: 48vh;
		background-color: #f8f8f8;
		padding: 2vw 3vw;
		
		.numberBtn {
			display: inline-block;
			border: 1px solid #000;
			border-radius: 50%;
			line-height: 10vw;
			width: 10vw;
			height: 10vw;
			margin: 2vw 1vw;
			text-align: center;
			background-color: rgba(128, 0, 0, .5);
		}
		.trueBtn {
			background-color: rgba(0, 128, 0, .5);
		}
	}
	.btnbox {
		position: fixed;
		bottom: 0;
		display: flex;
		width: 94vw;
		margin: 0 auto;
		margin-bottom: 2vh;
		button {
			width: 40vw;
		}
	}
</style>

